import { Form, Input, Modal, } from 'antd';
import TextEditor from './TextEditor';
import { useEffect, useState } from 'react';

const AddAnnouncement = ({
  open,
  onCreate,
  onCancel,
}) => {
  const [form] = Form.useForm();
  const [content, setContent] = useState(null)

  const addOntentChang = (data) => {
    setContent(data)
  }

  useEffect(()=>{
    setContent(null)
  },[open])

  const itmes = [
    { name: "fd_title", label: "标题", span: 22, },
    { name: "fd_content", label: "内容", span: 22, }
  ]

  return (
    <Modal
      destroyOnClose
      width={950}
      open={open}
      okText={"添加"}
      cancelText="退出"
      onCancel={onCancel}
      onOk={() => {
        form
          .validateFields()
          .then((values) => {
            form.resetFields();
            onCreate({ ...values, fd_content: content });
          })
          .catch((info) => {
            console.log('Validate Failed:', info);
          });
      }}
    >
      <Form
        preserve={false}
        form={form}
        layout="horizontal"
        name="form_in_modal"
        wrapperCol={{
          span: 12,
        }}
        className="updata-user-infor"
      >
        {
          itmes.map(item => {
            return (
              <Form.Item
                key={item.name}
                name={item.name}
                label={item.label}
                wrapperCol={{ span: item.span }}
              >
                {
                  item.name === "fd_title" ?
                    <Input /> :
                    <TextEditor onChangeValue={addOntentChang} />
                }
              </Form.Item>
            )
          })
        }
      </Form>
    </Modal>
  );
};
export default AddAnnouncement